import React from "react";
import { Text, StyleSheet, ViewStyle, TextStyle } from "react-native";

type TitleProps = {
  text: string;
  size?: "xs" | "sm" | "md" | "lg" | "xl";
  weight?: "regular" | "medium" | "semibold" | "bold";
  align?: "left" | "center" | "right";
  color?: string;
  numberOfLines?: number;
  style?: TextStyle;
};

const sizeMap: Record<NonNullable<TitleProps["size"]>, number> = {
  xs: 12,
  sm: 14,
  md: 16,
  lg: 20,
  xl: 24,
};

const weightMap: Record<
  NonNullable<TitleProps["weight"]>,
  TextStyle["fontWeight"]
> = {
  regular: "400",
  medium: "500",
  semibold: "600",
  bold: "700",
};

export default function Title(props: TitleProps) {
  const {
    text,
    size = "lg",
    weight = "semibold",
    align = "left",
    color = "#111827",
    numberOfLines = 1,
    style,
  } = props;

  return (
    <Text
      numberOfLines={numberOfLines}
      style={[
        styles.base,
        {
          fontSize: sizeMap[size],
          textAlign: align,
          color,
          fontWeight: weightMap[weight],
        },
        style,
      ]}
    >
      {text}
    </Text>
  );
}

const styles = StyleSheet.create({
  base: {
    letterSpacing: 0.2,
    includeFontPadding: false,
    marginVertical: 6,
  },
});
